<template>
	<div class="icons">
		<swiper :options="swiperOption" v-if="showSwiper">
			<swiper-slide v-for="(page,index) of pages" :key="index">
			<div class="icon" v-for="item of page" :key="item.id">
				<div class="icon-img">
					<img class="icon-img-content" :src="item.imgUrl" alt="">
				</div>
				<p class="icon-desc">{{item.desc}}</p>
			</div>
			</swiper-slide>
			<div class="swiper-pagination"  slot="pagination"></div>
		</swiper>
	</div>
</template>

<script>
export default {
  name: 'HomeIcons',
  props: {
    list:Array
  },
  data () {
  	return {
  		swiperOption: {
        	pagination: '.swiper-pagination',
        	loop: true
        },
  		// iconList: [
  		// 	{
  		// 		id: '0001',
  		// 		imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
  		// 		desc: '景点门票'
  		// 	},
  		// 	{
  		// 		id: '0002',
  		// 		imgUrl: 'http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png',
  		// 		desc: '必游榜单'
  		// 	},
  		// 	{
  		// 		id: '0003',
  		// 		imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/6a/45f595250c73d102.png',
  		// 		desc: '夏日玩水'
  		// 	},
  		// 	{
  		// 		id: '0004',
  		// 		imgUrl: 'http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png',
  		// 		desc: '一日游'
  		// 	},
  		// 	{
  		// 		id: '0005',
  		// 		imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png',
  		// 		desc: '动植物园'
  		// 	},
  		// 	{
  		// 		id: '0006',
  		// 		imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/6c/9e54a8540fee0102.png',
  		// 		desc: '故宫'
  		// 	},
  		// 	{
  		// 		id: '0007',
  		// 		imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/47/c2b659e048b11602.png',
  		// 		desc: '主题乐园'
  		// 	},
  		// 	{
  		// 		id: '0008',
  		// 		imgUrl: 'http://img1.qunarzz.com/piao/fusion/1804/ed/cf572be30fc32f02.png',
  		// 		desc: 'Q+精选'
  		// 	},
  		// 	 {
  		// 		id: '0009',
  		// 		imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/e3/67df61427c8e1302.png',
  		// 		desc: '演出'
  		// 	},
  		// 	{
  		// 		id: '0010',
  		// 		imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/96/c70f1e85ae4a4f02.png',
  		// 		desc: '自然风光'
  		// 	},
  		// 	{
  		// 		id: '0011',
  		// 		imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png',
  		// 		desc: '演出'
  		// 	},
  		// 	{
  		// 		id: '0012',
  		// 		imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/dd/cce1231836f10a02.png',
  		// 		desc: '周边游'
  		// 	},
  		// 	{
  		// 		id: '0013',
  		// 		imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/b6/37560ece9c62b502.png',
  		// 		desc: '城市观光'
  		// 	},
  		// 	{
  		// 		id: '0014',
  		// 		imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/95/8246f27355943202.png',
  		// 		desc: '游乐场'
  		// 	},
  		// ]
  	}
  },
  computed: {
  	pages () {
  		const pages = []
  		this.list.forEach((item,index) => {
  			const page = Math.floor(index/8)
  			if(!pages[page]){
  				pages[page] = []
  			}
  			pages[page].push(item)
  		})
  		return pages;
  	},
    showSwiper () {
        return this.list.length
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
	@import '~styles/varibles.styl'
	@import '~styles/mixins.styl'
	.icons >>> .swiper-container
		height: 0
		padding-bottom: 50%
		overflow: hidden
	.icons
		margin-top:.2rem
		.icon
			position:relative
			overflow: hidden
			float:left
			width: 25%
			height: 0
			padding-bottom: 25%
			.icon-img
				position: absolute
				top: 0
				left: 0
				right: 0
				bottom: .44rem
				box-size: border-box
				padding: .1rem
				.icon-img-content
					display: block
					margin: 0 auto
					height:100%
			.icon-desc
				position: absolute
				left:0
				right:0
				bottom:0
				height:.44rem
				line-height:.44rem
				color:$darkTextColor
				text-align:center
	/*			overflow:hidden
				white-space:nowrap
				text-overflow:ellipsis*/
				ellipsis()
</style>
